<template>
    <div class="personalized" style="margin-top: 40px;">
        <el-divider content-position="left">
            <span style="font-weight: 600;">你的专属歌单</span>
        </el-divider>
        <!-- 骨架占位 -->
        <div class="skeleton" v-if="personalizeds.length == 0">
            <el-skeleton v-for="index in 24" :key="index" style="width: 150px" loading animated>
                <template #template>
                    <el-skeleton-item variant="image" style=" width: 150px; height: 150px" />
                    <el-skeleton-item variant="p" style="width: 150px;margin-top: 10px;" />
                </template>
            </el-skeleton>
        </div>
        <div class="personalized_container" v-else>
            <div class="personalized_item" v-for="(item, index) in personalizeds" :key=index
                @click="router.push({ name: 'playlist', query: { id: item.id } })">
                <PlayCover :pic-url="item.picUrl" :play-count="item.playCount"></PlayCover>
                <p>{{ item.name }}</p>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue"
import { useRouter } from "vue-router";
import PlayCover from "@/components/common/Playlistcover.vue"
import { GetPersonalizedInfo } from "@/api/api.ts"
import type { PersonalizedResult } from "@/models/discover"
const personalizeds = ref<PersonalizedResult>([])
const router = useRouter()

onMounted(() => {
    getPersonalized()
})
const getPersonalized = async () => {
    await GetPersonalizedInfo().then(res => {
        personalizeds.value = res.data.result
    })
}
</script>
<style lang="scss" scoped>
.personalized_container,
.skeleton {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;

    .personalized_item {
        width: 150px;
        margin-bottom: 20px;
        cursor: pointer;

        p {
            margin-top: 10px;
            width: 150px;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

}
</style>
